<template>
	<view class="container">
		<!-- <owner-echart></owner-echart> -->
		<u-modal :show="showModal" :title="modalTitle" :content='content' @confirm="confirm" :showCancelButton='true'
			@cancel="()=>showModal=false">
		</u-modal>
		<view class="tips">
			<view class="item">
				<text class="dot" style="background-color: #E62029;"></text>
				<text>问题数：{{sumList.totalCount}}</text>
			</view>
			<view class="item">
				<text class="dot" style="background-color: #D57FF8;"></text>
				<text>待整改：{{sumList.notPassCount}}</text>
			</view>
			<view class="item">
				<text class="dot" style="background-color: #FFC107;"></text>
				<text>已整改：{{sumList.passCount}}</text>
			</view>
		</view>
		<question-echart :all="sumList.totalCount" :wip="sumList.notPassCount" :ip='sumList.passCount'
			:nodeList='sumList.nodeList'>
		</question-echart>
		<right-popup-query-question :show="show" @click="query" :bottomRadios.sync="sortRadios" :topRadios="timeRadios"
			:bottomTitle="bottomTitle"></right-popup-query-question>
		<view class="tab-content">
			<view class="title" @click="()=>show = true">
				<text class="left-tag">{{queryTime}}· {{querySort}} · {{queryPoint}} ></text>
				<text class="right" @click.stop="showM" v-if="showExportBtn">{{rightTitle}}</text>
			</view>
			<view class="pixs" v-if="progressList.length!=0">
				<u-checkbox-group :showCheckBox="showCheckbox" v-model="selectedQuestion" placement="row" size="30">
					<view v-for="(item, qualityId) in progressList" :key="qualityId" class="wrap-box">
						<u-checkbox activeColor=" #E62029" :customStyle="{marginBottom: '8px'}" :name="item.qualityId"
							shape="circle" class="checkbox-item">
							<view slot="content">
								<data-checked-item :item="item" :showCheckbox="showCheckbox">
								</data-checked-item>
							</view>
						</u-checkbox>
					</view>
				</u-checkbox-group>
			</view>
			<!-- 为空数据时候 -->
			<u-empty v-if="progressList.length== 0" text="暂无记录~" icon="/static/nodata.png" marginTop="166rpx"
				width="200rpx" height="131rpx">
			</u-empty>
		</view>
		<!-- 底部栏 -->
		<view class="bottom-line" v-if="showCheckbox">
			<!-- <u-radio-group> -->
			<u-radio @change="changeRadio" label="全选" activeColor="#E62029" size="28rpx"></u-radio>
			<!-- </u-radio-group> -->
			<view class="btns">
				<!-- <text class="rm" @click="deleteRecord">删除</text> -->
				<text class="out" @click="output">导出</text>
			</view>
		</view>
	</view>
</template>

<script>
	import _question from "@/common/question.js"
	import _utils from "@/common/_utils.js"
	import _public from "@/common/public.js"
	import _constant from "@/common/constant.js"
	//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
	export default {
		name: "project-quality",
		props: {
			node: Object
		},
		data() {
			return {
				showExportBtn: false,
				sumList: {},
				bottomTitle: '分类筛选',
				queryTime: '',
				queryPoint: '',
				querySort: '',
				showPicker: false,
				timeRadios: [],
				sortRadios: [],
				show: false,
				showCheckbox: false,
				selectedQuestion: [],
				rightTitle: '导出',
				progressList: [],
				showModal: false,
				content: '',
				modalTitle: ''
			};
		},
		beforeMount() {
			this.init()
		},
		methods: {
			changeRadio(item) {
				if (item) {
					let tempIds = []
					for (let i = 0; i < this.progressList.length; i++) {
						tempIds.push(this.progressList[i].key)
					}
					this.selectedQuestion = tempIds
				} else {
					this.selectedQuestion = []
				}
			},
			confirm() {
				let _push_form = {}
				_push_form.estateId = this.node.estateId
				_push_form.issuesType = 2
				_push_form.issuesStatus = 3
				_push_form.estateIds = this.selectedQuestion
				const result = _constant.downloadURL(_push_form)
				wx.getSetting({
					success: (res) => {
						//检查是否有访问相册的权限，如果没有则通过wx.authorize方法授权
						if (!res.authSetting['scope.writePhotosAlbum']) {
							console.log('没有获取授权');
							wx.authorize({
								scope: 'scope.writePhotosAlbum',
								success: (res) => {
									console.log(that)
									//用户点击允许获取相册信息后进入下载保存逻辑
									_question.downloadAndSave(result)
								}
							})
						} else {
							console.log('已获取授权');
							_question.downloadAndSave(result)
						}
					}
				});
				uni.$u.sleep(500).then(() => {
					this.showModal = false
				})
			},
			output() {
				let tempIds = []
				for (let i = 0; i < this.progressList.length; i++) {
					tempIds.push(this.progressList[i].qualityId)
				}
				this.selectedQuestion = tempIds
				// console.log(this.selectedQuestion)
				// if (this.selectedQuestion.length) {
				this.modalTitle = '导出记录'
				this.content = '是否确认导出该页记录？'
				this.showModal = true
			},
			showM() {
				// this.rightTitle = this.rightTitle === '取消' ? '导出' : '取消'
				// this.showCheckbox = this.rightTitle === '取消'
				// this.showModal=true
				this.output()
			},
			getSrc(ids) {
				let idArray = ids.split(',')
				let id = idArray[0]
				if ((typeof id) != undefined && id != '') {
					let _src = uni.$http.baseURL + '/file/download?fileId=' + id
					return _src
				}
			},
			async init() {
				console.log('init')
				this.timeRadios = _utils.backTimeArray()
				let para = {}
				para.estateId = this.node.estateId
				if (this.node.type == 'public') {
					para.id = await _constant.getConstentPartId('公建芯造')
				} else {
					para.id = await _constant.getConstentPartId('房屋芯造')
				}
				const data = await _public.getSelectNode(para)
				if (data.length != 0) {
					this.sortRadios = _utils.tranferNode(data);
				}
				//TODO:初始化数据
				//获取进度列表，得到数组并将每个数组的imag[0],拼接成新的图片
				let _params = {}
				this.queryTime = this.timeRadios[0].text
				this.queryPoint = this.sortRadios[0].text
				this.querySort = '待整改'
				_params.statusList = [1, 2, 4, 11]
				_params.queryEndTime = this.timeRadios[0].time.queryEndTime
				_params.queryStartTime = this.timeRadios[0].time.queryStartTime
				_params.rootPartId = this.sortRadios[0].rootPartId
				_params.estateId = this.node.estateId
				this.paramsData = _params
				this.fectchQuestion(_params)
				let _push_form = {}
				_push_form.estateId = this.node.estateId
				_push_form.partId = this.sortRadios[0].rootPartId
				_push_form.issuesType = 2
				this.sumList = await _question.getQuestionEchart(_push_form)
			},
			query(data) {
				let _params = {}
				_params.queryEndTime = data[0].time.queryEndTime
				_params.queryStartTime = data[0].time.queryStartTime
				_params.rootPartId = data[1].rootPartId
				this.queryTime = data[0].text
				this.queryPoint = data[1].text
				this.querySort = data[2].text
				if (data[2].sort == 1) {
					this.showExportBtn = false
					_params.statusList = [1, 2, 4, 11]
				} else if (data[2].sort == 2) {
					this.showExportBtn = true
					_params.statusList = [3]
				} else {
					this.showExportBtn = false
					_params.statusList = [2, 1, 3, 4, 11]
				}
				_params.estateId = this.node.estateId
				this.fectchQuestion(_params)
				this.show = false
				console.log(data)
			},
			async fectchQuestion(para) {
				let _push_form = {}
				_push_form.rootPartId = para.rootPartId
				_push_form.estateId = para.estateId
				_push_form.statusList = para.statusList
				_push_form.issuesType = 2
				_push_form.queryEndTime = para.queryEndTime
				_push_form.queryStartTime = para.queryStartTime
				this.progressList = await _question.getQuestionList(_push_form)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-line {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(158, 158, 158, 0.15);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 30rpx 0 60rpx;
		justify-content: space-between;

		.btns {
			display: inline-flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 28rpx;
			padding: 0 60rpx 0 0rpx;

			.out {
				display: inline-block;
				text-align: center;
				position: relative;
				width: 140rpx;
				height: 56rpx;
				line-height: 56rpx;
				border: 1rpx solid #E62029;
				border-radius: 28rpx;
				margin-right: 30rpx;
				color: #FFFFFF;
				background: linear-gradient(0deg, #E93423 0%, #FB6858 100%);
			}
		}
	}

	.container {
		padding: 20rpx 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.tab-content {
			width: 90%;
			background-color: #FFFFFF;
			margin-top: 20rpx;
			border-radius: 20rpx;
			border: 1rpx solid #efefef;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}

	.title {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.left-tag {
			display: inline-flex;
		}

		.right {
			margin-left: 60rpx;
			display: inline-block;
			text-align: center;
			position: relative;
			height: 56rpx;
			line-height: 56rpx;
			width: 120rpx;
			background: #FFFFFF;
			border: 1rpx solid #E62029;
			border-radius: 28rpx;
			color: #E62029;
			font-size: 24rpx;
		}
	}

	.pixs /deep/ .u-checkbox-group--row {
		display: flex;
		flex-wrap: wrap;
	}

	.tips {
		display: inline-flex !important;
		flex-direction: row;
		justify-content: space-around;
		align-content: space-around;
		color: #333333;
		font-size: 24rpx;

		.item {
			display: block;
			margin-right: 20rpx;

			// display: inline-flex;
			.dot {
				display: block;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				border: 1rpx solid #efefef;
				margin-right: 15rpx;
			}

			text-align: center;
			line-height: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}
</style>
